<template>
	<view>

		<view class="head box-pading">
			<u-navbar :safeAreaInsetTop="true" bgColor="rgba(231, 240, 248, 1)" rightIcon="more-dot-fill"
				:autoBack="false"  @leftClick="leftClick()" :placeholder="true">
				<view class="navbar-right flex-no-horizontal" slot="right" @click="followClick">
					<view class="navbar-right-text flex-no-horizontal">
						<u-icon name="plus" color="rgba(51, 51, 51, 1)" size="15" v-if="!IfFollow"
							style="margin-right: 10rpx;"></u-icon>
						{{ IfFollow ? '已关注' : '关注' }}
					</view>
				</view>
				<view slot="center"></view>
			</u-navbar>

			<!-- 用户基本信息 -->
			<basicInformation :userInfo="userInfo" :userRelation="userRelation"></basicInformation>

		</view>

		<view class="main box-pading">

			<!-- 藏品信息 -->
			<!-- <collection :userId="userId" style="position: relative;z-index: 1;background-color: white;"></collection> -->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :use-page-scroll="true">
				<!-- 动态信息标题 -->
				<view class="main-dynamic flex-no-horizontal">
					<view class="main-dynamic-title">他的动态</view>
					<view class="main-dynamic-right flex-no-horizontal">
						<view class="main-dynamic-right-default flex-no-horizontal"
							:class="{'main-dynamic-right-active':dynamicSort === 0}" @click="dynamicSortClick(0)">按时间
						</view>
						<view class="main-dynamic-right-default flex-no-horizontal"
							:class="{'main-dynamic-right-active':dynamicSort === 1}" @click="dynamicSortClick(1)">按点赞
						</view>
						<view class="main-dynamic-right-default flex-no-horizontal"
							:class="{'main-dynamic-right-active':dynamicSort === 2}" @click="dynamicSortClick(2)">按评论
						</view>
					</view>
				</view>

				<!-- 动态信息 -->
				<dynamicItem :ifShowFollow="false" v-for="item in dataList" :key="item.dynamicId"
					:typeEntranceEntry="'pCenter'" :isInHome="true"
					:imgs="item.fileName === '' ? [] : item.fileName.split(',')" :record="item"
					:ref="'dynamic' + item.dynamicId" @refresh="refreshList" @moreClick="moreClick">
				</dynamicItem>

			</z-paging>

		</view>
		<u-popup bgColor="transparent" :show="takeOffPopup">
			<view class="takeOffPopups">
				<view class="popupFont">
					你确定要取消关注该用户吗？
				</view>
				<view class="btn">
					<view class="btnSuccess" @tap="onTakeOff()">
						不再关注
					</view>
					<view class="btnClose" @tap="takeOffPopup = false">
						取消
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 更多选择弹窗 -->
		<moreSelect :showOverlay="ifShowSelect" isInHome :record="selectData.record" :offsetY="selectData.offsetY"
			@hideOverlay="moreSelectHide" @specificFunc="selectSpecificFunc"></moreSelect>

	</view>
</template>

<script>
	import basicInformation from './common/userBasicInformation.vue'
	import collection from './common/collection.vue'
	import dynamicItem from './common/dynamic.vue'
	import {
		otherUserInfoApi,
		userRelationApi,
		userFollowAddApi,
		userDynamicHistoryListApi,
		userIfFollowApi
	} from '../../api/index.js'
	import ZPagingMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	import dynamicMore from '../../common/mixin/dynamic.js'
	import moreSelect from './common/dynamicMore.vue'
	export default {
		mixins: [ZPagingMixin, dynamicMore],
		components: {
			basicInformation,
			collection,
			dynamicItem,
			moreSelect
		},
		data() {
			return {
				dataList: [],
				userInfo: {
					avatar: '',
					blockchainAddr: '',
					code: '',
					sex: 1,
					sign: '',
					userId: '',
					username: ''
				},
				userRelation: {
					follower: 0,
					following: 0,
					likeNum: 0
				},
				takeOffPopup: false, //取关弹框
				userId: '',
				dynamicSort: 0, //动态排序方式 0时间 1点赞最多，2评论最多
				IfFollow: false, //用户是否关注
				selectData: {
					record: {},
					offsetY: 0
				},
				ifShowSelect: false,
				index: 0 ,//从搜索页面进入的某一个用户下标
				type: '',
			};
		},
		computed: {

		},
		onLoad(e) {
			this.userId = parseInt(e.userId) || ''
			if (e.index >= 0 && e.type) {
				this.index = e.index
				this.type = e.type
			}
		},
		methods: {
			leftClick() {
				if(this.type){
					// let pages = getCurrentPages(),
					// nowPage = pages[pages.length - 1],
					// prevPage = pages[pages.length - 2],
					let pageData = {
						index: this.index,
						type: this.type,
						typeFollow: this.IfFollow
					}
					uni.$emit('clickType', {
						pageData: pageData
					})
					// prevPage.$vm.pageData = pageData; 
					uni.navigateBack();
					return true; 
				} else {
					uni.navigateBack();
				}
			},
			//取消关注
			async onTakeOff() {
				try {
					// 取关操作
					const res = await userFollowAddApi({
						beFollowId: this.userId,
						following: false
					})
					//用户是否关注该用户
					const userIfFollowRes = await userIfFollowApi({
						mid: this.userId
					})
					this.IfFollow = userIfFollowRes.data.is_follow
					this.takeOffPopup = false;
					uni.showToast({
						title: '取消关注成功',
						icon: 'none'
					})
				} catch (e) {
					this.$refs.uToast.show({
						type: 'default',
						message: e.message || e.data
					});
				}
			},
			//关注点击
			async followClick() {
				try {
					if (!this.IfFollow) {
						// 关注操作
						const res = await userFollowAddApi({
							beFollowId: this.userId,
							following: true
						})
						//用户是否关注该用户
						const userIfFollowRes = await userIfFollowApi({
							mid: this.userId
						})
						this.IfFollow = userIfFollowRes.data.is_follow
						uni.showToast({
							title: '关注成功',
							icon: 'none'
						})
					} else {
						// 取关操作
						this.takeOffPopup = true;
					}
					
				} catch (e) {
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					//TODO handle the exception
				}
			},

			//动态排序点击
			dynamicSortClick(item) {
				this.dynamicSort = item
				this.$refs.paging.reload()
			},

			//获取用户基本信息
			async getUserInfo(id) {
				console.log('执行请求')
				try {


				} catch (e) {
					console.log(e)
					//TODO handle the exception
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
				}
			},

			//下拉刷新,上拉加载
			async queryList(pageNo, pageSize) {

				try {
					//用户信息
					const userInfoRes = await otherUserInfoApi({
						mid: this.userId
					})
					this.userInfo = userInfoRes.data

					//用户关系信息
					const userRelationRes = await userRelationApi({
						mid: this.userId
					})
					this.userRelation = userRelationRes.data

					//用户是否关注该用户
					const userIfFollowRes = await userIfFollowApi({
						mid: this.userId
					})
					this.IfFollow = userIfFollowRes.data.is_follow

					const dynamicRes = await userDynamicHistoryListApi({
						orderModel: this.dynamicSort,
						mid: this.userId,
						pageNum: pageNo,
						pageSize
					})

					this.$refs.paging.complete(dynamicRes.data || []);

				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					})
					this.$refs.paging.complete(false);

				}

				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging
				// this.$request.queryList({
				// 	pageNo,
				// 	pageSize
				// }).then(res => {
				// 	//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
				// 	this.$refs.paging.complete(res.data.list);
				// }).catch(res => {
				// 	//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
				// 	//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
				// 	//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
				// 	this.$refs.paging.complete(false);
				// })
			},
			//删除后刷新数据
			refreshList() {
				this.$refs.paging.reload()
			},

		},
	};
</script>

<style lang="scss" scoped>
	.takeOffPopups {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 60rpx 40rpx;
		width: 82%;
		margin: 20rpx auto 100rpx;
	
		.popupFont {
			font-size: 32rpx;
			font-weight: 700;
			margin-bottom: 60rpx;
			text-align: center;
		}
	
		.btn {
			.btnSuccess {
				margin: 53rpx 0;
				width: 100%;
				text-align: center;
			}
	
			.btnClose {
				background: #ababab;
				border-radius: 60rpx;
				padding: 37rpx 0;
				width: 100%;
				text-align: center;
				color: #000000;
				font-weight: 700;
			}
		}
	}
	.head {
		background-image: $uni-bg-color-gradual-change;
		padding-bottom: 30rpx;
		background-color: #FFFFFF;
		position: relative;

		.navbar-right {
			justify-content: center;

			.navbar-right-text {
				padding: 0 30rpx;
				height: 60rpx;
				justify-content: space-around;
				color: rgba(51, 51, 51, 1);
				font-size: 22rpx;
				border-radius: 30rpx;
				border: 2rpx solid rgba(51, 51, 51, 1);

			}

		}
	}

	.main {
		border-radius: 40rpx 40rpx 0 0;

		.main-dynamic {
			margin: 50rpx 0;
			justify-content: space-between;

			.main-dynamic-title {
				font-size: $uni-font-size-xlg;
				color: $uni-color-black;
				font-weight: bold;
			}

			.main-dynamic-right {
				height: 56rpx;
				background-color: rgba(247, 247, 247, 1);
				border-radius: 28rpx;

				.main-dynamic-right-default {
					width: 131rpx;
					height: 56rpx;
					color: rgba(179, 180, 181, 1);
					font-size: 22rpx;
					font-weight: bold;
					justify-content: center;
				}

				.main-dynamic-right-active {
					width: 131rpx;
					height: 56rpx;
					color: $uni-color-black;
					font-size: 22rpx;
					font-weight: bold;
					background-color: #FFFFFF;
					border-radius: 28rpx;
				}
			}

		}

	}
</style>
